<template>
	<view class="context">
		<view class="head">
			<view class="head-content">
				<view class="title">总资产折合</view>
				<view class="usd">39.67 USDT</view>
				<view class="about">≈￥259.555</view>
			</view>
			<!-- <view class="cha" @click="toOthers('details')">查看明细</view> -->
		</view>
		<view class="box">
			<view class="box-head">
				<view class="box-head-title">我的资产</view>
				<view style="display: flex;justify-content: space-around;">
					<view class="box-head-item" @tap.stop="handleNavTo({ url: '/pages/wallet/recharge/index' })">
						<view class="item-icon">
							<image src="/static/charge.png"></image>
						</view>
						<view class="item-title">充币</view>
					</view>
					<view class="box-head-item" @tap.stop="handleNavTo({ url: '/pages/wallet/withdraw/index' })">
						<view class="item-icon">
							<image src="/static/withdraw.png"></image>
						</view>
						<view class="item-title">提币</view>
					</view>
          <!-- exchange -->
					<view class="box-head-item" @tap.stop="handleNavTo({ url: '/pages/wallet/transfer/index' })">
						<view class="item-icon">
							<image src="/static/change.png"></image>
						</view>
						<view class="item-title">划转</view>
					</view>
				</view>
			</view>
			<view class="box-content">
				<view class="box-item">
					<view class="item-icon">
						<image src="/static/ICON_BTC2.png"></image>
						<view class="item-title">BTC</view>
					</view>
					<view class="item-use">
						<view>可用</view>
						<view>0.00000000</view>
					</view>
					<view class="item-switch">
						<view>折合</view>
						<view>0.00USDT</view>
					</view>
				</view>
				<!-- <u-line color="#f5f5f5"></u-line> -->
				<view class="box-item">
					<view class="item-icon">
						<image src="/static/ICON_ETH2.png"></image>
						<view class="item-title">ETH</view>
					</view>
					<view class="item-use">
						<view>可用</view>
						<view>0.00000000</view>
					</view>
					<view class="item-switch">
						<view>折合</view>
						<view>0.00USDT</view>
					</view>
				</view>
				<u-line color="#f5f5f5"></u-line>
				<view class="box-item">
					<view class="item-icon">
						<image src="/static/ICON_BTC2(1).png"></image>
						<view class="item-title">FIL</view>
					</view>
					<view class="item-use">
						<view>可用</view>
						<view>0.00000000</view>
					</view>
					<view class="item-switch">
						<view>折合</view>
						<view>0.00USDT</view>
					</view>
				</view>
				<u-line color="#f5f5f5"></u-line>
				<view class="box-item">
					<view class="item-icon">
						<image src="/static/USDT.png"></image>
						<view class="item-title">USDT</view>
					</view>
					<view class="item-use">
						<view>可用</view>
						<view>0.00000000</view>
					</view>
					<view class="item-switch">
						<view>折合</view>
						<view>0.00USDT</view>
					</view>
				</view>
				<!-- <u-line color="#f5f5f5"></u-line> -->
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions, mapGetters, mapState } from "vuex";
export default {
  data() {
    return {
      hide: false,
      isLoading: false,
    };
  },
  methods: {
    ...mapActions("asset", ["loadAssets"]),
    isHide() {
      this.hide = !this.hide;
    },
  },
  computed: {
    ...mapState("asset", ["assets"]),
    funcList() {
      return [
        {
          name: this.$t("wallet.recharge"),
          img: "/static/mf/my/assets/chongbi.png",
          url: "/pages/wallet/recharge/index",
        },
        {
          name: this.$t("wallet.withdraw"),
          img: "/static/mf/my/assets/tibi.png",
          url: "/pages/wallet/withdraw/index",
        },
        {
          name: this.$t("wallet.internalTransfer"),
          img: "/static/mf/my/assets/transfer.png",
          url: "/pages/wallet/transfer/index",
        },
        {
          name: this.$t("mf.my.exchange"),
          img: "/static/mf/my/assets/exchange.png",
          url: "/pages/exchange/index",
        },
      ];
    },
    //计算总金额
    totalAsset() {
      let total = 0;
      this.assets.map((item) => {
        total += parseFloat(item.balance_price.USDT);
      });
      console.log(total);
      return parseFloat(total).toFixed(2);
    },
    totalAssetCny() {
      let total = 0;
      this.assets.map((item) => {
        total += parseFloat(item.balance_price.CNY);
      });
      console.log(total);
      return parseFloat(total).toFixed(4);
    },
  },
  async onShow() {
    this.isLoading = true;
    await this.loadAssets();
    this.isLoading = false;
  },
};
</script>
<style lang="scss">
	page {
		background-color: #f5f5f5;
		height: 100vh;
	}

	.head {
		width: 100%;
		height: 320rpx;
		background-color: #2A96EE;
		position: relative;

		.head-content {
			padding-top: 50rpx;
			color: #fff;
			text-align: center;

			.usd {
				font-size: 48rpx;
				font-weight: bold;
			}

			.about {
				font-size: 32rpx;
			}
		}

		.cha {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			width: 136rpx;
			height: 48rpx;
			line-height: 48rpx;
			color: #fff;
			border: 2rpx solid #FFFFFF;
			text-align: center;
			border-radius: 24rpx;
			font-size: 24rpx;
		}
	}

	.box {
		.box-head {
			background-color: #fff;
			width: 702rpx;
			border-radius: 12rpx;
			padding: 20rpx;
			margin: 0 auto;
			position: relative;
			top: -90rpx;

			.box-head-title {
				font-size: 30rpx;
				font-weight: bold;
			}
		}
	}

	.box-head-item {
		margin-top: 20rpx;
		text-align: center;

		.item-icon {
			image {
				width: 68rpx;
				height: 68rpx;
			}
		}
	}

	.box-content {
		width: 702rpx;
		margin: -70rpx auto 0 auto;

		.box-item {
			background-color: #fff;
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.box-item {
		.item-icon {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}

		.item-switch {
			text-align: right;
		}
	}
</style>
